<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/my-conference-people.css" />
		<style>
			[v-cloak] {
				display: none !important;
			}
			/*确认创建群聊按钮设置*/
			
			.mui-bar-nav .mui-btn-link:active {
				color: #fff;
			}
			
			.mui-bar-nav .mui-btn-link:enabled:active {
				color: #fff;
				background-color: transparent;
			}
			
			.mui-bar-nav .mui-btn-blue:enabled:active {
				border: 0
			}
			/*搜索按钮文字设置*/
			
			input[type=search] {
				text-align: left;
				font-size: 14px;
				font-weight: initial;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="mui-content" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="width: 45px;"></a>
				<h1 class="mui-title"></h1>
				<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" @click="handleMembers" v-show="checkednums > 0">确定({{checkednums}})</button>
			</header>
			<div class="mui-content">
				<div class="mui-input-row" style="height: 50px; padding: 10px 10px; 0">
					<input type="search" class="mui-input-clear" style="width:80%;background-color: rgba(239, 238, 243, .5);" v-model="search" placeholder="请输入姓名搜索">
					<button type="button" @click="searchQuerylist(search)" class="mui-btn mui-btn-primary" style="height: 32px; font-size: 14px;line-height: 5px;">搜索</button>
				</div>
				<div class="mui-control-content mui-scroll-wrapper mui-active">
					<div class="groups-list mui-scroll">
						<!--通讯目录-->
						<div v-show="!search" v-if="items.length !=0" v-for="item in items">
							<div class="title title-sz">
								{{item.name}}
							</div>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-checkbox" v-for="useritem in item.users">
									<div class="mui-col-xs-12 selectors" v-on:click="checkItem(useritem)">
										<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/qq.png">
										<div class="mui-col-xs-8 mui-media-body" style="font-size: 16px; line-height: 45px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
											{{useritem.name}}{{useritem.partyJob ? '【'+useritem.partyJob+'】':''}}
										</div>
										</label>
										<input name="checkbox" value="" type="checkbox" :checked="useritem.check" :disabled="useritem.disabled">
									</div>
								</li>
							</ul>
						</div>
						<div v-show='flag'>
							<div class="title title-sz">
								通讯录
							</div>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-checkbox" v-for="useritem in searchlist">
									<div class="mui-col-xs-12 selectors" v-on:click="checkItem(useritem)">
										<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/qq.png">
										<div class="mui-col-xs-8 mui-media-body" style="font-size: 16px; line-height: 45px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
											{{useritem.name}}{{useritem.partyJob ? '【'+useritem.partyJob+'】':''}}
										</div>
										</label>
										<input name="checkbox" value="" type="checkbox" :checked="useritem.check" :disabled="useritem.disabled">
									</div>
								</li>
								<li class="mui-table-view-cell mui-checkbox" v-show="err">
									<div class="mui-col-xs-12" style="text-align: center; font-size: 14px;">
										未找到相关数据
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
	var usersvm;
	var orglist;
	var loginid = localStorageFunc.get('applogininfo').id; // app登录用户id
	var organizationslist = localStorageFunc.get('organize'); // 获取本地组织机构
	var selectedMembers; //已选人员
	var waiting; //加载动画
	var columtitle;
	var selectedtype;

	console.log('organizationslist:' + JSON.stringify(organizationslist));

	//屏幕可用工作区高度
	var contentHeight = window.screen.availHeight - 120;
	$(".mui-control-content").height(contentHeight);

	setTimeout(function() {
		mui(".mui-scroll-wrapper").scroll();
	}, 500);

	mui.plusReady(function() {
		var self = plus.webview.currentWebview();
		selectedMembers = self.selectors;
		columtitle = self.typename;
		selectedtype = self.typemeeting;
		$('.mui-title').text(columtitle);

		initDom();
		initData(selectedMembers, self.handletype);

	});

	function initDom() {
		usersvm = new Vue({
			el: "#mui-content",
			data: {
				items: [],
				searchlist: '',
				flag: false,
				search: '',
				err: false,
				groupname: ''
			},
			watch: {
				search: function() { // 监听键入的值且清空之前的匹配列表
					this.searchlist = '';
					this.err = false;
					this.flag = false;
				}
			},
			computed: {
				checkednums: function() { // 计算属性来获取已选择的人数，具有返回值
					var selected = 0;
					$.each(this.items, function(index, item) {
						var userslist = [];
						$.each(item.users, function(index, item) {
							if(item.check == true && item.disabled == false) {
								selected += 1;
							}
						});
					});

					return selected;
				}
			},
			methods: {

				//	切换选择状态
				checkItem: function(item) {
					if(item.disabled == false) {
						item.check = !item.check;
					}

					this.search = '';
				},

				//	与会人员、会议主持、会议助理、会议审核人员操作
				handleMembers: function() {
					var usersids = [];
					$.each(this.items, function(index, item) {
						var userslist = [];
						$.each(item.users, function(index, item) {
							if(item.check == true && item.disabled == false) {
								var userobj = {
									name: item.name,
									id: item.id
								}
								usersids.push(userobj);
							}

						});
					});

					var selectorsObj = {
						type: selectedtype,
						items: usersids
					}
					var btn = ["取消", "确认"];
					mui.confirm('确认保存' + columtitle + '数据', '温馨提示', btn, function(e) {
						if(e.index == 1) {
							setTimeout(function() {
								var conferencebookPage = plus.webview.getWebviewById('my-conference-book');
								if(conferencebookPage) {
									mui.fire(conferencebookPage, 'refreshMeetingBookData', selectorsObj);
								}
								mui.back();
							}, 300);
						}
					}, 'div');

				},

				//	人员搜索
				searchQuerylist: function(text) {
					if(!text) {
						mui.toast('请输入姓名进行搜索');
						return;
					}

					waiting = plus.nativeUI.showWaiting("数据加载中...");
					var searcharr = organizationslist.users;
					var userslist = [];
					var _this = this;
					$.each(searcharr, function(index, useritem) {
						if(useritem.name.indexOf(text) > -1) { // 匹配当前用户是否包含输入的关键字
							userslist.push(useritem);
						}
					});

					setTimeout(function() {
						waiting.close();
						if(userslist.length) {
							_this.flag = true;
							_this.searchlist = userslist;
						} else {
							_this.flag = true;
							_this.searchlist = '';
							_this.err = true;
						}
					}, 500)
				}
			}
		});

	}

	function initData(members) {

		//	邀请群成员操作
		$.each(organizationslist.organizations, function(index, orgitem) {
			var userslist = [];
			$.each(organizationslist.users, function(index, useritem) { //	选择联系人操作
				if(orgitem.id == useritem.organizationIds) {
					useritem.check = false; // 新增是否选择属性，默认为未选中状态
					userslist.push(useritem);
					useritem.disabled = false;

					$.each(members, function(index, selectedmember) {
						if(useritem.id == selectedmember.id) {
							useritem.check = true; // 新增是否选择属性，默认为未选中状态
							//useritem.disabled = true; //禁用已选中的人员
						}
					})
				}
			});

			orgitem.users = userslist;
		});

		usersvm.items = organizationslist.organizations;

		mui('.mui-scroll-wrapper').scroll();

		setTimeout(function() {
			document.body.removeChild(document.getElementById('Loading'));
		}, 200)

	}
</script>